<template>
	<u-navbar :is-back="false" :is-fixed="true" :background="{background:'#ffffff'}" :border-bottom="false">
		<view class="u-flex top-box">
			<view class="u-flex-1">
				<u-search bg-color="#F6F6F6" @clear="searchClear" @search="searchConfirm" @custom="searchConfirm" v-model.trim="searchParams.name" :show-action="true" placeholder="请输入关键词" :clearabled="true"></u-search>
			</view>
		</view>
	</u-navbar>
	<view class="" v-if="searchKeyWords.length>0">
		<view class="u-flex">
			<view class="u-p-28 u-tips-color u-flex-1">
				历史搜索
			</view>
			<view class="u-p-28" @click="clearKeyWords">
				<u-icon name="trash" color="#999999" size="32"></u-icon>
			</view>
		</view>
		<view class="u-p-l-20">
			<view class="tag-min-grey" v-for="v in searchKeyWords" @click="clickTag(v)">
				{{v}}
			</view>
		</view>	
	</view>
	<view class="u-p-16" v-if="searchFlag">
		<view v-for="(item,index) in list" :key="item.sid">
			<view class="bgw box-radius u-p-l-16 u-p-r-16 u-m-b-28">
				<item :detail="item" :border="false"></item>
			</view>
			
		</view>
		<g-loadmore :status="loadmoreStatus"></g-loadmore>
		<u-gap height="20"></u-gap>
	</view>
</template>

<script setup>
	import store from '@/store/index.js'; //需要引入store

	import {
		ref,
		reactive,
		computed,
		getCurrentInstance,
		watch
	} from 'vue'
	const {
		proxy,
	} = getCurrentInstance()
	const {
		baseImgUrl
	} = proxy;
	const {
		nav,
		navLogin
	} = proxy.$util;
	import {
		onReady,
		onLoad,
		onShow,
		onPageScroll,
		onShareAppMessage
	} from '@dcloudio/uni-app'
	import mixins from '@/common/js/mixins.js';
	const {
		shareAppMessage
	} = mixins();
	import mixinList from '@/common/js/mixinList.js';
	const {
		total,
		current_page,
		page_size,
		last_page,
		apiPath,
		loading,
		list,
		searchParams,
		getList,
		getNextList,
		loadmoreStatus,
		// searchClear,
		// searchConfirm
	} = mixinList();
	const props = defineProps({
		type: {
			type: [String, Number],
			default: '',
		},
	})
	if(props.type){
		searchParams.type = Number(props.type)
	}
	const searchKeyWords = computed(() => store.state.$searchKeyWords)
	apiPath.value = 'getProduct'
	// searchParams.type = 0
	searchParams.productStatus = 1;
	searchParams.name = '';
	const searchFlag = ref(false)
	const searchClear = () => {
		searchFlag.value = false;
		// console.log('111111111');
		// getList(1);
	}
	const searchConfirm = () =>{
		if(searchParams.name){
			store.commit('set_searchKeyWord', searchParams.name)
			searchFlag.value = true;
			getList(1);
		}else{
			searchFlag.value = false;
		}
	}
	const clearKeyWords = () =>{
		store.commit('clear_searchKeyWords')
	}
	const clickTag = (d) => {
		searchParams.name = d;
		searchConfirm()
	}
	

	onReady(() => {
		
	})
	onLoad(async (d) => {
		// getList(1);
	})
	onShow(async () => {
		// store.commit('set_userRole', 'user')
	})
	onPageScroll(e => {

	})
</script>

<style scoped lang="scss">
	.top-box {
		display: flex;
		align-items: center;
		padding: 0 14px;
		width: 100%;
	}
	.tag-min-grey{
		display: inline-block;
		margin:3upx 6upx;
		
	}

</style>